<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>机组排班</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="plugins/bootstraptable/bootstrap-table-edittable.css">
    <link href="plugins/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet">

    <link rel="stylesheet" href="hplus/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="hplus/css/style.css?v=4.0.0" rel="stylesheet">

    <link href="hplus/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/jQuery-2.1.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
    <script src="plugins/bootstraptable/bootstrap-table-editable.js"></script>
    <script src="plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
    <script src="plugins/bootstrapValidator/js/language/zh_CN.js"></script>

    <link rel="stylesheet" href="css/toastr.min.css">
    <script src="js/toastr.min.js"></script>
    <script src="js/toastrinit.js"></script>
    <script src="plugins/layer/layer.js"></script>
    <link rel="stylesheet" href="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <script src="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <link href="plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet"/>
    <link href="plugins/bootstraptable/bootstrap-editable.css" rel="stylesheet"/>
    <script src="plugins/bootstraptable/bootstrap-editable.js"></script>
    <script src="plugins/select2/js/select2.full.min.js"></script>
    <script src="js/front-extend.js"></script>
    <link rel="stylesheet" href="hplus/css/base.css" rel="stylesheet">
    <style>
        .item {
            background: #f7f7f7;
            border: 1px solid #eee;
            margin: 10px 0;
            padding-bottom: 10px;
            padding-top: 10px;
        }
        .active{
            color:#fff;
            background:#1ab394;
        }
        .fa.fa-plus-circle{
            font-size:28px;
            color:#1ab394;
        }
        .fa.fa-minus-circle{
            font-size:28px;
            color:#ed5565;
        }
    </style>
</head>
<body class="gray-bg layer-blue">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row" id="same-height-row">
        <div class="col-md-8 col-sm-8 same-height-box">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-blue">
                    <h5><i class="fa fa-file-text"></i>&nbsp;排班管理 </h5>
                </div>
                <div class="ibox-content">
                    <div class="btn-group table-tool" id="table1-toolbar" role="group">
                        <input type="text" placeholder="开始日期" style="width:120px;"
               class="table-tool-btn pull-left text-center" id="startDate"/>
                        <button type="button" class="btn btn-outline btn-success btn-refresh" data-toggle="tooltip"
                                title="查询" id="btn-search">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </div>
                    <table id="table" data-classes="table table-hover table-condensed">
                        
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 same-height-box">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-blue">
                    <h5><i class="fa fa-file-text"></i>&nbsp;人员管理 </h5>
                </div>
                <div class="ibox-content">
                    <table id="table-person" data-classes="table table-hover table-condensed">
                        <thead>
                        <tr>
                            <th data-field="id" data-formatter="orderFormatter">序号</th>
                            <th data-field="name">姓名</th>
                            <th data-field="posi">技术</th>
                            <th data-field="dept">部门</th>
                            <th data-field="sex">性别</th>
                            <th data-field="age">年龄</th>
                            <th data-field="weekDuty">周执勤</th>
                            <th data-field="monthDuty">月执勤</th>
                            <th data-field="monthTime">月飞</th>
                            <th data-field="yearTime">年飞</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-sm-12 same-height-box">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-blue">
                    <h5><i class="fa fa-file-text"></i>&nbsp;人员排班 </h5>
                </div>
                <div class="ibox-content">
                    <table id="table-person-task" data-classes="table table-hover table-condensed">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content layer-body" id="layerBody" style="display:none;">
    <form class="form-horizontal" id="user_edit_form">
        <div class="row person-item">
            <div class="col-sm-8 col-sm-offset-1">
                <div class="form-group">
                    <div class="col-xs-3 form-label-v">
                        <label>成员<font color='red'>*</font>:</label>
                    </div>
                    <div class="text-left col-sm-9">
                        <select id="person1" class="person"></select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-3 form-label-v">
                        <label>岗位<font color='red'>*</font>:</label>
                    </div>
                    <div class="text-left col-sm-9">
                        <select class="position" id="position1"></select>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <i class="fa fa-plus-circle" onClick="operatePerson(this)"></i>
            </div>
        </div>
         <div class="row person-item hide">
                <div class="col-sm-8 col-sm-offset-1">
                    <div class="form-group">
                        <div class="col-xs-3 form-label-v">
                            <label>成员<font color='red'>*</font>:</label>
                        </div>
                        <div class="text-left col-sm-9">
                            <select id="person2" class="person"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-3 form-label-v">
                            <label>岗位<font color='red'>*</font>:</label>
                        </div>
                        <div class="text-left col-sm-9">
                             <select class="position" id="position2"></select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <i class="fa fa-minus-circle" onClick="operatePerson(this)"></i>
                </div>
            </div>
    </form>
</div>
<script type="text/javascript">

    $(document).ready(function () {
         $.fn.select2.defaults.set( "theme", "bootstrap" ); //使用select2-bootstrap主题
        var data = [{
            id:1,
            line:'青宁银兰',
            task:[
                {
                    "id": 0,
                    "name": [
                        {
                            data:[{
                                text:"青宁银兰",
                                date:''
                                }
                            ]
                            
                        },
                        {
                            data:[{
                            text:"兰乌兰",
                            date:'1357'
                        },
                        {
                            text:"兰克兰",
                            date:'246'
                        }]
                            
                        },
                        {
                            data:[{
                            text:"兰敦兰青",
                            date:''
                        }]
                        }
                    ],
                    "start": "2018.03.25",
                    "end": "2018.10.26",
                    "status": "有效",
                    "update": "2018.02.02"
                }
            ],
            captain:'',
            routeCaptain:'',
            copilot1:'',
            copilot2:''
        }];
        var result = [
    {
      "id": 28814210,
      "name": "write-you-a-haskell",
      "full_name": "sdiehl/write-you-a-haskell"
    },
    {
      "id": 29953676,
      "name": "A-MusicView",
      "full_name": "north2016/A-MusicView"
    },
    {
      "id": 1366239,
      "name": "adopt-a-hydrant",
      "full_name": "codeforamerica/adopt-a-hydrant"
    },
    {
      "id": 6203164,
      "name": "Grid-A-Licious",
      "full_name": "suprb/Grid-A-Licious"
    },
    {
      "id": 83999700,
      "name": "Best-websites-a-programmer-should-visit",
      "full_name": "sdmg15/Best-websites-a-programmer-should-visit",
    },
    {
      "id": 6738756,
      "name": "a",
      "full_name": "alfateam/a",
    }
  ];
        /*$.ajax({
            url: "https://api.github.com/search/repositories?q=a",
            dataType: 'json',
            async:false,
            data: function (params) {
              return {
                q: 'a', // search term
              };
            },
            success:function(data){
                result = data.items;
            }
          });*/
         $("#table").bootstrapTable({
            data:data,
            clickToSelect: true,
            singleSelect: true,
            showRefresh: false,                  //是否显示刷新按钮
            striped: true,//行间隔色
            locale: "${language}",
            uniqueId:'id',
            onClickRow: function (row, $element) {
                $element.addClass('info').siblings().removeClass('info').end();
            },
            columns: [
                {
                    field:'id',
                    title:'序号',
                    formatter:orderFormatter
                },
                {
                field: 'line',
                title: '连线',
            }, {
                field: 'task',
                title: '任务',
                formatter:taskFormatter
            }, {
                field: 'captain',
                title: '机长',
                editable: {
                    type: "select2",
                    mode:'inline',
                    source: result,
                    select2: {
                        width: 200,
                        placeholder: '请选择',
                        allowClear: true,
                        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                          minimumInputLength: 1,
                          templateResult: formatRepo,
                          templateSelection: formatRepoSelection
                    },
                    placement: "bottom",
                    showbuttons: false,
                }
            },{
                field: 'routeCaptain',
                title: '航线机长',
                formatter:layerFormatter
            }, {
                field: 'copilot1',
                title: '第一副驾驶',
                formatter:layerFormatter
            }, {
                field: 'copilot2',
                title: '第二副驾驶',
                formatter:layerFormatter
            }],
              onEditableSave: function (field, row, oldValue, $el) {
                  console.log(32); //在列头的字段添加 data-editable='true'可以执行
                 //传入后台
              },
        });
         
         $("#table-person").bootstrapTable({
            /*数据参数清单*/
            //分页参数
            pagination: true,//是否分页
            pageList: [10, 25, 50, 100],
            pageSize: 10,
            pageNumber: 1,
            clickToSelect: true,
            singleSelect: true,
            showRefresh: false,                  //是否显示刷新按钮
            uniqueId:'id',
            striped: true,//行间隔色
            locale: "${language}",
            onClickRow: function (row, $element) {
                $element.addClass('info').siblings().removeClass('info').end();
            }
        });
         var columnsArray = [];
         var tablePersonTaskData = [];
         for(var i=0;i<30;i++){
            var date = addDate(new Date(),(i-20));
            var item = {
                "field":date,
                "title":date
            }
            columnsArray.push(item);
         }
         var dataItem = {};
         for(var i=0;i<columnsArray.length;i++){
            dataItem[columnsArray[i].field] = columnsArray[i].field+'任务';
         }
         tablePersonTaskData.push(dataItem);

         $("#table-person-task").bootstrapTable({
            /*数据参数清单*/
            //分页参数
            data:tablePersonTaskData,
            pagination: true,//是否分页
            pageList: [10, 25, 50, 100],
            pageSize: 10,
            pageNumber: 1,
            clickToSelect: true,
            singleSelect: true,
            showRefresh: false,                  //是否显示刷新按钮
            uniqueId:'id',
            striped: true,//行间隔色
            locale: "${language}",
            onClickRow: function (row, $element) {
                $element.addClass('info').siblings().removeClass('info').end();
            },
            columns:columnsArray
        });
        
        $("#startDate").datetimepicker({
            minView: "month",
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            todayHighlight: true,
            pickerPosition: "bottom-right"
        });
        $("#startDate").datetimepicker('setDate',new Date()).trigger('change');
    });

    function orderFormatter(value, row, index) {
        return index + 1;
    }
    //权限
    function operateFormatter(value, row, index) {
        return [
            '&nbsp;&nbsp;',
            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
            '<span class="glyphicon glyphicon-edit "></span>',
            '</a>',
            '&nbsp;&nbsp;',
            '<a class="delete ml10" href="javascript:void(0)" title="删除">',
            '<span class="glyphicon glyphicon-trash text-danger"></span>',
            '</a>',
        ].join('');
    }

    function addDate(date,days){ 
       var d = new Date(date); 
       d.setDate(d.getDate()+days); 
       var m=d.getMonth()+1; 
       return d.getFullYear()+'-'+m+'-'+d.getDate(); 
     } 
     function taskFormatter(value,row,index){
        var isTodayClass = '';
        var result = '';
        if(value && value.length>0){
            var name = value[0].name;
          for(var i=0;i<name.length;i++){
                if(i == (name.length-1)){
                    if(name[i].data.length > 1){
                        for(var j=0;j<name[i].data.length;j++){
                            if(j == (name[i].data.length-1)){
                                if(name[i].data[j].date){
                                    result += name[i].data[j].text+"("+name[i].date+")" + "</div>";
                                }else{
                                    result += name[i].data[j].text+"</div>";
                                }
                            }else{
                                if(name[i].data[j].text == row.line){
                                    isTodayClass = 'active';
                                }else{
                                    isTodayClass = '';
                                }
                                if(name[i].data[j].date){
                                    result += "<div class='"+isTodayClass+"'>"+name[i].data[j].text+"("+name[i].data[j].date+")/";
                                }else{
                                    result += "<div class='"+isTodayClass+"'>"+name[i].data[j].text+"/";
                                }
                             }
                        }
                    }else if(name[i].data.length = 1){
                        if(name[i].data[0].text == row.line){
                            isTodayClass = 'active';
                        }else{
                            isTodayClass = '';
                        }
                        if(name[i].data[0].date){
                            result += "<div class='"+isTodayClass+"'>"+name[i].data[0].text+"("+name[i].data[0].date+")" +"</div>";
                        }else{
                            result += "<div class='"+isTodayClass+"'>"+name[i].data[0].text+"</div>";
                        }
                    }
                }else{
                    if(name[i].data.length > 1){
                        for(var j=0;j<name[i].data.length;j++){
                             if(j == (name[i].data.length-1)){
                                if(name[i].data[j].date){
                                    result += name[i].data[j].text+"("+name[i].data[j].date+")" + "</div>";
                                }else{
                                    result += name[i].data[j].text + "</div>";
                                }
                             }else{
                                if(name[i].data[j].text == row.line){
                                    isTodayClass = 'active';
                                }else{
                                    isTodayClass = '';
                                }
                                if(name[i].data[j].date){
                                    result += "<div class='"+isTodayClass+"'>"+name[i].data[j].text+"("+name[i].data[j].date+")/";
                                }else{
                                    result += "<div class='"+isTodayClass+"'>"+name[i].data[j].text+"/";
                                }
                             }
                            
                        }
                    }else if(name[i].data.length = 1){
                        if(name[i].data[0].text == row.line){
                            isTodayClass = 'active';
                        }else{
                            isTodayClass = '';
                        }
                        if(name[i].data[0].date){
                            result += "<div class='"+isTodayClass+"'>"+name[i].data[0].text+"("+name[i].data[0].date+")" +"</div>";
                        }else{
                            result += "<div class='"+isTodayClass+"'>"+name[i].data[0].text + "</div>";
                        }
                    }
                }
                
            }
        }
        return result; 
    }
    function layerFormatter(value,row,index){
        return '<a onclick=choosePerson()>请选择</a>';
    }
    var positionData = [
        {
          "id": 1,
          "text": "教"
        },
        {
          "id": 2,
          "text": "检"
        },
        {
          "id": 3,
          "text": "学"
        },
        {
          "id": 4,
          "text": "被检"
        }
    ];
    var personData = [
        {
          "id": 1,
          "text": "教"
        },
        {
          "id": 2,
          "text": "检"
        },
        {
          "id": 3,
          "text": "学"
        },
        {
          "id": 4,
          "text": "被检"
        }
    ];
    function choosePerson(){
         layer.open({
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                area: ['40%', '30%'],
                btn: ["保存", "取消"],
                zIndex: 999,
                title: "修改成员",
                content: $("#layerBody"),
                yes: function (indexLayer, layero) {
                    

                },
                cancel: function (indexLayer, layero) {
                },
                success: function (indexLayer, index) {
                    //数据显示
                    $(".position").select2({
                        minimumResultsForSearch: Infinity,
                        data: positionData,
                        width: "100%"
                    });
                    $(".person").select2({
                         width: "100%",
                          lang: "zh-CN",
                          ajax: {
                            url: "https://api.github.com/search/repositories",
                            dataType: 'json',
                            delay: 250,
                            data: function (params) {
                              return {
                                q: params.term, // search term
                              };
                            },
                            processResults: function (data, params) {
                              return {
                                results: data.items,
                              };
                            },
                            cache: true
                          },
                          placeholder: '请选择成员',
                          escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                          minimumInputLength: 1,
                          templateResult: formatRepo,
                          templateSelection: formatRepoSelection
                        });
                }
            });
    }
function formatRepo (repo) {
  var markup = "<div class='select2-result-repository clearfix'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div></div>";
  return markup;
}
function formatRepoSelection (repo) {
  return repo.full_name;
}
    function operatePerson(dom){
        if($(dom).hasClass("fa-plus-circle")){
            $(dom).removeClass("fa-plus-circle").addClass("fa-minus-circle");
            $(".person-item").removeClass("hide");
        }else{
            $(dom).parents(".person-item").addClass("hide");
            $(dom).parents(".person-item").siblings().find(".fa").removeClass("fa-minus-circle").addClass("fa-plus-circle");
        }
    }

</script>
</body>
</html>